<template>
	<view class="all">
		<!-- 必填项 -->
		<view class="info_must">
			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">模板名</text>
					<input class="input" placeholder="请填写模板名" placeholder-class="placeholder" type="text" v-model="name" value="" />
				</view>
			</view>

			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">手机号</text>
					<input class="input_phone" placeholder="请填写手机号" placeholder-class="placeholder" type="text" v-model="phone" value="" />
				</view>
				<button class="phone_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="phone == ''">获取</button>
			</view>



			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">出发地</text>
					<input class="input" placeholder="请填写出发地" placeholder-class="placeholder" type="text" v-model="departurePlace"
					 value="" />
				</view>
			</view>

			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">目的地</text>
					<input class="input" placeholder="请填写目的地" placeholder-class="placeholder" type="text" v-model="destination" value="" />
				</view>
			</view>


			<view class="info_must_one" @click="openChoosePerson()">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">{{type==0 ? '座位数' : '人数'}}</text>
					<input class="input" :placeholder="type==0 ? '请填写座位数' : '请填写人数'" placeholder-class="placeholder" type="number"
					 disabled="true" v-model="personNum" value="" />
				</view>
			</view>
		</view>


		<!-- 选填项 -->
		<view class="pass" v-if="type == 0">
			<view class="info_must_one">
				<view class="info_must_one_title_input">
					<text class="info_must_one_title">途经</text>
					<input class="input" placeholder="请添加途经 （选填）" placeholder-class="placeholder" type="text" v-model="route" value="" />
				</view>
			</view>
		</view>

		<textarea v-show="!popupStatus" class="textarea" value="" placeholder="请添加备注 （选填）" placeholder-class="placeholder"
		 v-model="ps"></textarea>
		<view :class="['textarea',ps ? '':'placeholder']" v-show="popupStatus">{{ps || '请添加备注 （选填）'}}</view>
		<view class="isDefault">
			<text class="isDefault_title">设为默认模板</text>
			<switch checked @change="switchChange" style="transform:scale(0.7)" color="#4687FF" />
		</view>

		<view class="release_btn">
			<text class="btn" @click="addTemplateBtn">确定</text>
		</view>

		<uni-popup ref="personNum" type="bottom" @change="popupChange">
			<view class="choose_person_num">
				<text class="choose_person_num_one" v-for="(item,index) of personNumList" :key="index" @click="choosePerson(item)">{{item}}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		addTemplate,
		wxUserPhone
	} from '@/Service/login.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				type: '',
				phone: '', //电话
				name: '', //模板名称
				departurePlace: '', //出发地
				destination: '', //目的地
				personNum: '', //座位数，人数
				personNumList: [1, 2, 3, 4],
				route: '', //途经
				ps: '', //备注
				isDefault: true, //是否默认

				popupStatus: false, // 人数弹框状态

				loginCode: null, // 人数弹框状态
			}
		},
		onLoad(option) {
			this.type = option.type
			let pageName = (option.type == 0 ? '添加车找人模板' : '添加人找车模板')
			uni.setNavigationBarTitle({
				title: pageName
			})
			this.phone = (uni.getStorageSync("phone") ? uni.getStorageSync("phone") : '');

			// 进入前先获取并保存一次 code
			let self = this;
			uni.login({
				provider: "weixin",
				success: (login_ret => {
					self.loginCode = login_ret.code;
				})
			})
		},
		methods: {
			// 弹框的change函数
			popupChange(dt) {
				this.popupStatus = dt.show;
			},

			//获取手机号
			getPhoneNumber(e, status = false) {
				let self = this
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					// console.log('用户点击允许', e, status);
					uni.login({
						provider: "weixin",
						success: (login_ret => {
							let params = {
								code: login_ret.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
							}
							wxUserPhone(params).then((ret) => {
								if (ret.data.code == 20007 && !status) {
									// self.getPhoneNumber(e, true);
									self.Toast('获取手机号失败，请重试~');
								} else {
									self.phone = ret.data.data
									uni.setStorageSync('phone', ret.data.data)
								}
							}).catch((err) => {
								console.log(err)
							})
						})
					})
					
					// function acceptToRequest() {
					// 	let params = {
					// 		code: self.loginCode,
					// 		encryptedData: e.detail.encryptedData,
					// 		iv: e.detail.iv,
					// 	}
					// 	wxUserPhone(params).then((ret) => {
					// 		if (ret.data.code == 20007 && !status) {
					// 			// self.getPhoneNumber(e, true);
					// 			self.Toast('获取手机号失败，请重试~');
					// 		} else {
					// 			self.phone = ret.data.data
					// 			uni.setStorageSync('phone', ret.data.data)
					// 		}
					// 	}).catch((err) => {
					// 		console.log(err)
					// 	})
					// }

				} else {
					console.log('用户点击拒绝')
				}
			},
			//打开选择人数
			openChoosePerson() {
				this.$refs.personNum.open();
			},

			//选择人数
			choosePerson(item) {
				console.log(item)
				this.personNum = item
				this.$refs.personNum.close();
			},
			switchChange(e) {
				console.log(e.detail)
				this.isDefault = e.detail.value
			},
			//新增模板
			addTemplateBtn() {
				let self = this
				let judge = self.judgeUpData()
				if (!judge) {
					console.log('00000000000')
					return
				}
				uni.showLoading({
					title: '发布中'
				});
				let params = {
					name: self.name,
					departurePlace: self.departurePlace, //出发地
					destination: self.destination, //目的地
					type: self.type, //信息类别
					phone: self.phone, //手机号
					quantity: self.personNum, //人数或座位数
					pass: self.route, //途经
					remark: self.ps, //备注
					isDefault: self.isDefault, //是否设置为默认
				}
				addTemplate(params).then((ret) => {
					console.log(JSON.stringify(ret))
					if (ret.data.code == 0) {
						setTimeout(function() {
							uni.hideLoading();
							self.ToastSuccess('新增成功')
						}, 1000);
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 3000);
					} else {
						uni.hideLoading();
						self.Toast(ret.data.msg)
					}
				}).catch((err) => {
					console.log(err)
				})
			},

			//发布前判断
			judgeUpData() {
				let self = this
				let judge = true
				if (self.name == '') {
					self.Toast('请填写模板名称')
					return false
				}
				if (self.phone == '') {
					self.Toast('请填写手机号')
					return false
				}
				if (!(/^1[3456789]\d{9}$/.test(self.phone))) {
					self.Toast('手机号有误')
					return false
				}

				if (self.departurePlace == '') {
					self.Toast('请填写出发地')
					return false
				}
				if (self.destination == '') {
					self.Toast('请填写目的地')
					return false
				}
				if (self.personNum == '') {
					self.Toast('请填写数量')
					return false
				}

				return judge
			},

			//普通toast
			Toast(e) {
				uni.showToast({
					title: e,
					icon: 'none',
					duration: 2000
				});
			},
			ToastSuccess(e) {
				uni.showToast({
					title: e,
					icon: 'success',
					duration: 2000
				});
			}
		}
	}
</script>

<style>
	page {
		font-family: Source Han Sans CN;
		background-color: #F8F8F8;
	}

	.all {
		padding: 20upx 30upx;
	}

	.info_must {
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 0 30upx;
	}

	.info_must_one {
		height: 110upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #FFFFFF;
	}

	.info_must_one_title_input {
		display: flex;
		align-items: center;
	}

	.info_must_one_title {
		display: block;
		font-size: 28upx;
		color: #343434;
		width: 120upx;
	}

	.input {
		font-size: 26upx;
		color: #343434;
		width: 450upx;
	}

	.more_icon {
		width: 14upx;
		height: 24upx;
	}

	.pass {
		background-color: #FFFFFF;
		height: 110upx;
		padding: 0 30upx;
		margin-top: 20upx;
		border-radius: 20upx;
	}

	.textarea {
		margin-top: 20upx;
		background-color: #FFFFFF;
		width: 630upx;
		height: 180upx;
		padding: 26upx 30upx;
		font-size: 26upx;
		color: #343434;
		border-radius: 20upx;
		line-height: 1.5;
	}

	.placeholder {
		font-size: 26upx;
		color: #9A9A9A;
		line-height: 1.2;
	}


	.release_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80upx;
	}

	.btn {
		display: block;
		width: 600upx;
		height: 88upx;
		background-color: #4687FF;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.input_phone {
		font-size: 26upx;
		color: #343434;
		width: 400upx;
	}

	.phone_btn {
		width: 100upx;
		height: 45upx;
		border-radius: 6upx;
		border: 2upx solid #4687FF;
		line-height: 38upx;
		padding: 0;
		color: #007AFF;
		font-size: 24upx;
		text-align: center;
	}

	.choose_person_num {
		height: 550upx;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;
		padding: 30upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.choose_person_num_one {
		display: block;
		text-align: center;
		height: 88upx;
		border-bottom: 2upx solid #a1a1a1;
		width: 450upx;
	}

	.isDefault {
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.isDefault_title {
		display: block;
		font-size: 26upx;
		color: #333333;
	}
</style>
